<template>
	<view class="order-item" @click="itemClick">
		<view class="order-item-title">
			<!-- seekType探店模式：1:到店 ，2：云剪辑  -->
			<image
				class="order-item-title-icon"
				:src="
					getOrderStatusStr !== ''
						? item.seekType === 2
							? '/static/images/order/icon_ddgl_yun@3x.png'
							: '/static/logo.png'
						: '/static/logo.png' || '/static/logo.png'
				"
			/>
			<view
				class="order-item-title-name"
				@click.stop="goToProductDetails"
				:style="{ fontWeight: getOrderStatusStr !== '' ? 400 : 500 }"
			>
				{{ getOrderStatusStr !== '' ? item.productName : '联联探客' }}
			</view>
			<image
				v-if="getOrderStatusStr !== ''"
				class="order-item-title-go"
				src="@/static/images/order/icon_ddgl_right.png"
				@click.stop="goToProductDetails"
			/>
			<view class="order-item-title-status">
				<view v-if="getOrderStatusStr !== '' && !isDetail" class="order-item-title-status-name">{{ getOrderStatusStr }}</view>
				<image v-if="getOrderStatusStr === ''" class="order-item-title-status-go" src="@/static/images/order/icon_ddgl_right.png" />
			</view>
		</view>
		<view class="order-item-info">
			<image class="order-item-info-image" :src="item.faceImg" />
			<view class="order-item-info-base">
				<view v-if="getOrderStatusStr !== ''" class="order-item-info-base-time">
					探店时间：{{ item.finalExploreTime + ' ' + item.finalExploreTimeScope }}
					<!-- <template v-if="item.probeStatus !== 10">
						{{ item.exploreTime + ' ' + item.exploreTimeScope }}
					</template>
					<template v-else>
						{{ item.finalExploreTime + ' ' + item.finalExploreTimeScope }}
					</template> -->
				</view>
				<view v-if="getOrderStatusStr !== ''" class="order-item-info-base-person">探店人数：{{ item.explorePeople }}人</view>
				<view v-else class="order-item-info-base-name" @click.stop="goToProductDetails">{{ item.productName }}</view>
				<view class="order-item-info-base-money" v-if="getOrderStatusStr !== ''">
					<view class="order-item-info-base-money-now">¥{{ item.productSalePriceYuan }}</view>
					<view class="order-item-info-base-money-old">¥{{ item.productOriginPriceYuan }}</view>
				</view>
			</view>
			<view class="order-item-info-money" v-if="item.probeStatus === 22">
				<view class="order-item-info-money-income">今日收益</view>
				<view class="order-item-info-money-add">+{{ item.todayIncomeYuan || 0 }}</view>
			</view>
		</view>
		<!-- 探店地址 -->
		<view
			v-if="item.latitude && item.longitude && IMG_URL && item.probeStatus !== 22 && item.probeStatus !== 12"
			class="order-item-addr"
			@click.stop="handleOpenLocation(item)"
			:style="{ backgroundImage: `url(${IMG_URL}order/img_order_position.png)` }"
		>
			<view class="order-item-addr-info">
				<view class="order-item-addr-info-title">探店地址：{{ item.exploreStore }}</view>
				<view class="order-item-addr-info-details">{{ item.exploreStoreAddress }}</view>
			</view>
			<image class="order-item-addr-go" src="/static/images/order/icon_order_right.png" />
		</view>
		<!-- 佣金模式 -->
		<view class="order-item-money">
			<view class="order-item-money-title">{{ item.probeStatus === 22 && isDetail ? '' : '佣金模式' }}</view>
			<view class="order-item-money-much">
				<view class="order-item-money-much-item">
					<view v-if="item.probeStatus === 22 && isDetail" class="order-item-money-much-title">总收益</view>
					<view v-if="item.probeStatus === 22 && isDetail" class="order-item-money-much-symbol" style="margin-left: 4rpx">¥</view>
					<view v-if="item.probeStatus === 22 && isDetail" class="order-item-money-much-num">
						{{ (item.finalPrice + item.commission) / 100 }}
					</view>
					<view v-if="item.probeStatus === 22 && isDetail" class="order-item-money-much-punctuation" style="margin-left: 4rpx">
						，
					</view>
				</view>
				<view class="order-item-money-much-item">
					<view class="order-item-money-much-item">
						<view v-if="item.commissionType === 1 || item.commissionType === 2" class="order-item-money-much-title">
							拍摄费
						</view>
						<view
							v-if="item.commissionType === 1 || item.commissionType === 2"
							class="order-item-money-much-symbol"
							style="margin-left: 4rpx"
						>
							¥
						</view>
						<view v-if="item.commissionType === 1 || item.commissionType === 2" class="order-item-money-much-num">
							{{ item.finalPrice / 100 }}
						</view>
						<view v-if="item.commissionType === 2" class="order-item-money-much-punctuation" style="margin-left: 4rpx">，</view>
					</view>

					<view class="order-item-money-much-item">
						<view v-if="item.commissionType === 2 || item.commissionType === 3" class="order-item-money-much-title">CPS</view>
						<view
							v-if="item.commissionType === 2 || item.commissionType === 3"
							class="order-item-money-much-symbol"
							style="margin-left: 8rpx"
						>
							¥
						</view>
						<view v-if="item.commissionType === 2 || item.commissionType === 3" class="order-item-money-much-num">
							{{ item.commission / 100 }}
						</view>
						<view
							v-if="item.commissionType === 2 || item.commissionType === 3"
							class="order-item-money-much-title"
							style="margin-left: 4rpx"
						>
							/单
						</view>
						<view
							v-if="(item.commissionType === 2 || item.commissionType === 3) && item.probeStatus === 22"
							class="order-item-money-much-title"
						>
							(¥{{ item.totalIncome / 100 }})
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="order-item-extraBonus" v-if="item.probeStatus !== 22 && item.redEnvelope !== null && item.redEnvelope !== 0">
			<view>额外奖励</view>
			<view>
				发布回传视频通过可获得
				<text>{{ item.redEnvelopeYuan }}</text>
				元红包
			</view>
		</view>
		<view
			class="order-item-extraBonus order-item-completed"
			v-if="item.probeStatus === 22 && item.redEnvelope !== null && item.redEnvelope !== 0"
		>
			<view>额外奖励</view>
			<view>
				已将获得
				<text>{{ item.redEnvelopeYuan }}</text>
				元红包计入可提现金额中
			</view>
		</view>
		<view v-if="!isDetail && getOrderStatusStr !== ''" class="order-item-bottom">
			<button
				class="order-item-bottom-upload"
				v-if="item.seekType === 2 && (item.probeStatus == 11 || item.probeStatus == 21 || item.probeStatus == 23)"
				@click.stop="toReferenceMarterial(item)"
			>
				参考素材
			</button>
			<template v-if="!(item.probeStatus === 10 && (item.finalPriceStatus === 1 || item.finalPriceStatus === 0))">
				<!-- 待确认 -->
				<button v-if="item.probeStatus === 10 && item.finalPriceStatus === 2" class="order-item-bottom-confirm">确认信息</button>
				<!-- 待探店 -->
				<button v-if="item.probeStatus === 11" class="order-item-bottom-upload">上传视频</button>
				<!-- 审核失败 -->
				<button v-if="item.probeStatus === 23" class="order-item-bottom-upload">重新上传视频</button>
			</template>

			<button
				v-if="(item.probeStatus === 10 && item.finalPriceStatus !== 3) || item.probeStatus === 0"
				class="order-item-bottom-cancel"
				@click.prevent.stop="openCancelCommonApplication"
			>
				取消申请
			</button>
			<!-- 拼团中 -->
			<button v-if="item.probeStatus === 0" class="order-item-bottom-upload" @click.prevent.stop="groupSeekInvaitation(item.id)">
				邀请拼团
			</button>
		</view>

		<template v-if="[12, 30].includes(item.probeStatus)">
			<view class="order-item-mask" />

			<image
				class="order-item-mask-image"
				:src="isShowCancellationIcon ? '/static/images/order/img_ddgl_cancel.png' : '/static/images/order/img_ddgl_bh.png'"
			/>
		</template>

		<DistributionCommonPopup v-model="showConfirmPopup" title="确认信息" @input="closePopup">
			<view class="order-item-confirm" @click.prevent.stop>
				<view class="order-item-confirm-label">
					<view class="order-item-confirm-label-title">探店时间：</view>
					<view class="order-item-confirm-label-context">{{ item.finalExploreTime + ' ' + item.finalExploreTimeScope }}</view>
				</view>
				<view class="order-item-confirm-label">
					<view class="order-item-confirm-label-title">探店地址：</view>
					<view class="order-item-confirm-label-context">{{ item.exploreStoreAddress }}</view>
				</view>
				<view class="order-item-confirm-label">
					<view class="order-item-confirm-label-title">探店人数：</view>
					<view class="order-item-confirm-label-context">{{ item.explorePeople }}人</view>
				</view>

				<view class="order-item-confirm-money">
					<view class="order-item-confirm-money-item">
						<view
							v-if="item.commissionType === 1 || item.commissionType === 2"
							class="order-item-confirm-money-title"
							style="width: 104rpx"
						>
							拍摄费：
						</view>
						<view v-if="item.commissionType === 1 || item.commissionType === 2" class="order-item-confirm-money-symbol">¥</view>
						<view v-if="item.commissionType === 1 || item.commissionType === 2" class="order-item-confirm-money-num">
							{{ item.finalPrice / 100 }}
						</view>
					</view>
					<view class="order-item-confirm-money-item">
						<view v-if="item.commissionType === 2 || item.commissionType === 3" class="order-item-confirm-money-title">
							CPS：
						</view>
						<view v-if="item.commissionType === 2 || item.commissionType === 3" class="order-item-confirm-money-symbol">¥</view>
						<view v-if="item.commissionType === 2 || item.commissionType === 3" class="order-item-confirm-money-num">
							{{ item.commission / 100 }}
						</view>
					</view>
				</view>

				<view class="order-item-confirm-button">
					<button @click.prevent="openCancelCommonApplication">取消申请</button>
					<button @click.prevent="confirmData">确认同意</button>
				</view>
			</view>
		</DistributionCommonPopup>

		<DistributionCommonPopup v-model="showRejectedPopup" :title="rejectedTitle">
			<view class="order-item-rejected">
				{{ item.approveMessage }}

				<template v-if="item.additionMessage">
					<text>（{{ item.additionMessage || '哈哈虎' }}）</text>
				</template>
			</view>
		</DistributionCommonPopup>
	</view>
</template>

<script>
import { defaultImageUrl } from '@/utils';

import { tdSeekApplyConfirmPrice } from '@/api/order';
import DistributionCommonPopup from '@/components/distributionCommonPopup/index.vue';

export default {
	name: 'AgentShopOrderItem',
	props: {
		item: {
			default: {}
		},
		isDetail: {
			type: Boolean,
			default: false
		}
	},

	components: { DistributionCommonPopup },

	data() {
		return {
			rejectedTitle: '',
			showConfirmPopup: false, //提交
			showRejectedPopup: false, //驳回

			cancelMsg: 'undefined_undefined_undefined_undefined'
		};
	},

	computed: {
		isShowCancellationIcon() {
			const {
				item: { probeStatus, finalPriceStatus }
			} = this;

			return [30].includes(probeStatus) || (probeStatus === 12 && finalPriceStatus === 3);
		},

		IMG_URL() {
			return defaultImageUrl;
		},
		/**
         * 待确认：10 + 2
         1、提交探店申请后，审核人员有改动探店信息，申请人需要确认信息
         2、点击不进入详情，点击就弹窗确认信息

         待探店-上传视频：11
         1、探店申请已通过

         审核中-重新上传视频：21
         1、探店视频信息已上传，且还没有审核结果

         审核失败-重新上传视频：23
         1、探店视频信息已上传，且审核失败

         审核中：10 + 0/1
         1、探店申请提交成功，还未有审核结果

         已完成：22
         1、探店视频已审核通过

         已驳回：12

         已取消：12 + 3
         1、提交探店申请后，审核人员有改动探店信息，申请人确认信息时选择了【取消申请】
         * @returns {number}
         */
		getOrderStatusStr() {
			const {
				item: { finalPriceStatus, probeStatus }
			} = this;
			if (probeStatus === 10 && finalPriceStatus === 2) {
				return '待确认';
			} else if (probeStatus === 11) {
				return '待探店';
			} else if (probeStatus === 21) {
				return '审核中';
			} else if (probeStatus === 23) {
				return '审核失败';
			} else if (probeStatus === 0) {
				return '拼团中';
			} else if (probeStatus === 10 && (finalPriceStatus === 1 || finalPriceStatus === 0)) {
				return '审核中';
			} else {
				return '';
			}
		}
	},
	methods: {
		// 邀请拼团
		groupSeekInvaitation(id) {
			let type = 'invite';
			uni.navigateTo({
				url: `/productOrderPage/groupSeekInvaitation?id=${id}&type=${type}`
			});
		},
		toReferenceMarterial(item = {}) {
			const { productId = '' } = item;
			if (!productId) {
				uni.showToast({
					mask: true,
					icon: 'none',
					title: '素材数据有误'
				});
				return;
			}
			uni.navigateTo({
				url: `/newMaterialPages/materialClass?id=${productId}`
			});
		},
		openCancelCommonApplication() {
			const {
				item: { id }
			} = this;

			uni.navigateTo({
				url: `/productOrderPage/CancelCommonApplication?id=${id}`
			});
		},

		//提交状态
		confirmData() {
			const { item } = this;
			if (this.isDetail) {
				return;
			}

			const params = {
				id: item.id
			};

			tdSeekApplyConfirmPrice(params).then((res) => {
				if (res.data === true) {
					uni.showToast({
						title: '确认订单成功！',
						icon: 'none'
					});
					this.closePopup();
					this.$emit('refreshData');
				} else {
					uni.showToast({
						title: '确认订单失败！',
						icon: 'none'
					});
				}
			});
		},

		//关闭弹窗
		closePopup() {
			this.showConfirmPopup = false;
			this.showRejectedPopup = false;
		},

		handleOpenLocation(list) {
			// 查看地图
			uni.openLocation({
				latitude: Number(list.latitude),
				longitude: Number(list.longitude),
				name: list.exploreStore,
				address: list.exploreStoreAddress,
				success: () => {
					console.log('success');
				},
				fail: (e) => {
					console.log(e);
				}
			});
		},
		//点击订单
		itemClick() {
			if (this.isDetail) {
				return;
			}
			const {
				item: { id, finalPriceStatus, probeStatus, seekType = 1 }
			} = this;
			if ([12, 30].includes(probeStatus)) {
				if (finalPriceStatus === 3 || [30].includes(probeStatus)) {
					this.rejectedTitle = '取消原因';
					this.showRejectedPopup = true;
				} else {
					this.rejectedTitle = '驳回原因';
					this.showRejectedPopup = true;
				}
			} else if (probeStatus === 10 && finalPriceStatus === 2) {
				// if (this.cancelMsg === 'undefined_undefined_undefined_undefined') {
				this.cancelMsg = '';
				// }
				this.showConfirmPopup = true;
			} else {
				uni.navigateTo({
					url: `/productOrderPage/orderDetails?orderId=${id}&seekType=${seekType}`
				});
			}
		},
		//进入商品详情
		goToProductDetails() {
			const {
				item: { productId }
			} = this;
			const url = `/tandianPage/ProductDetail?productId=${productId}`;

			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';
.order-item {
	width: 710rpx;
	background: #ffffff;
	border-radius: 24rpx;
	margin-top: 20rpx;
	padding: 30rpx 16rpx 20rpx 16rpx;
	position: relative;
	&-title {
		display: flex;
		align-items: center;
		position: relative;
		&-icon {
			width: 32rpx;
			height: 32rpx;
			border-radius: 50%;
		}
		&-name {
			font-size: 26rpx;
			font-weight: 400;
			color: #000000;
			max-width: 470rpx;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			margin-left: 16rpx;
		}
		&-go {
			width: 32rpx;
			height: 32rpx;
			margin-left: 12rpx;
		}
		&-status {
			position: absolute;
			right: 0;
			display: flex;

			&-name {
				font-size: 28rpx;
				font-weight: 500;
				color: #ff6b11;
			}
			&-go {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
	&-info {
		display: flex;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
		position: relative;
		&-image {
			width: 132rpx;
			height: 132rpx;
			border-radius: 16rpx;
		}
		&-base {
			margin-left: 16rpx;
			&-time {
				font-size: 28rpx;
				font-weight: 600;
				color: #333333;
				//margin-top: 8rpx;
			}
			&-person {
				margin-top: 10rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;
			}
			&-name {
				font-size: 26rpx;
				font-weight: 400;
				color: #000000;
				width: 336rpx;
				height: 72rpx;
				display: -webkit-box;
				overflow: hidden;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				text-decoration: underline;
			}
			&-money {
				margin-top: 10rpx;
				display: flex;
				align-items: center;
				&-now {
					font-size: 24rpx;
					font-weight: 400;
					color: #666666;
					line-height: 36rpx;
				}
				&-old {
					margin-left: 4rpx;
					font-size: 16rpx;
					color: #666666;
					font-weight: 400;
					line-height: 36rpx;
					text-decoration: line-through;
				}
			}
		}
		&-money {
			position: absolute;
			right: 0;
			text-align: right;
			&-income {
				font-size: 28rpx;
				font-weight: 600;
				color: #333333;
			}
			&-add {
				font-size: 56rpx;

				@include Db_moneyStyle();
			}
		}
	}
	&-addr {
		padding: 20rpx 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-size: 100% 100%;
		&-info {
			&-title {
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;
			}
			&-details {
				font-size: 22rpx;
				font-weight: 400;
				color: #666666;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				max-width: 554rpx;
				margin-top: 10rpx;
			}
		}
		&-go {
			width: 32rpx;
			height: 32rpx;
		}
	}
	&-money {
		//height: 72rpx;
		margin-top: 12rpx;
		background: #f6f6f6;
		border-radius: 16rpx;
		padding: 16rpx 24rpx 16rpx 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		&-title {
			font-size: 24rpx;
			font-weight: 400;
			color: #333333;
		}
		&-much {
			display: flex;
			align-items: baseline;
			flex-wrap: wrap;
			//height: 36rpx;
			max-width: 630rpx;
			justify-content: flex-end;
			line-height: 36rpx;
			align-content: flex-start;
			&-item {
				display: flex;
				align-items: baseline;
			}
			&-title {
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
			}
			&-symbol {
				font-size: 28rpx;
				font-family: font-number;
				font-weight: bold;
				color: #333333;
			}
			&-num {
				font-size: 40rpx;
				font-family: font-number;
				font-weight: bold;
				color: #333333;
			}
			&-punctuation {
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
			}
		}
	}
	&-bottom {
		text-align: right;
		margin-top: 28rpx;

		button {
			font-size: 28rpx;
			font-weight: 500;
			padding: 0 28rpx;
			border-radius: 28rpx;
			display: inline-block;
			margin-left: 20rpx;

			height: 56rpx;
			line-height: 52rpx;
			border: 2rpx solid #5359ff;

			&::after {
				display: none;
			}
		}

		&-confirm {
			background: #5359ff;
			color: #fff;
		}

		&-upload {
			background: #fff;
			color: #5359ff;
			margin-left: 20rpx;
		}

		&-cancel {
			color: #666;
			border: 2rpx solid #666 !important;
		}
	}
	&-mask {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
		padding-top: 88rpx;
		padding-left: 566rpx;
		background-color: #ffffff;
		opacity: 0.5;
		border-radius: 24rpx;
		&-image {
			z-index: 3;
			position: absolute;
			top: 88rpx;
			left: 566rpx;
			opacity: 1;
			width: 120rpx;
			height: 120rpx;
		}
	}
	&-confirm {
		padding-top: 40rpx;
		&-label {
			padding: 0 40rpx;
			display: flex;
			margin-bottom: 20rpx;
			&-title {
				font-size: 26rpx;
				font-weight: 400;
				color: #666666;
			}
			&-context {
				max-width: 386rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
			}
		}
		&-money {
			padding: 0 40rpx;
			display: flex;
			align-items: baseline;
			margin-bottom: 68rpx;
			&-item {
				display: flex;
				align-items: baseline;
				flex: 1;
			}
			&-title {
				font-size: 26rpx;
				font-weight: 400;
				color: #666666;
			}
			&-cps {
				margin-left: 98rpx;
			}
			&-symbol {
				font-size: 28rpx;
				font-weight: bold;
				color: $moneyColor;
			}
			&-num {
				font-size: 40rpx;

				@include Db_moneyStyle();
			}
		}

		&-button {
			display: flex;
			align-items: center;
			justify-content: space-between;

			padding: 0 28rpx;

			button {
				flex: 1;
				margin-left: 9rpx;
				@include Db_commonButton(80rpx, 24rpx);

				&:first-child {
					color: #333;
					background: #eee;
					margin: 0 9rpx 0 0;

					&:active {
						background: rgba(238, 238, 238, 1);
					}
				}
			}
		}
	}
	&-rejected {
		font-size: 34rpx;
		font-weight: 500;
		color: #000000;
		margin: 90rpx auto 130rpx;
		text-align: center;

		text {
			color: #999;
			font-size: 28rpx;
		}
	}
	&-extraBonus {
		width: 678rpx;
		height: 72rpx;
		background: #fdf4ef;
		border-radius: 8rpx;
		margin-top: 12rpx;
		padding: 20rpx 20rpx 20rpx 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		& > view:nth-child(2) {
			background-image: url('/static/images/order/img_jl_bg.png');
			text {
				color: #ff6b11;
			}
		}
	}
	&-complete {
		background: #ecf6e9;
	}
}
</style>
